<template>
  <button
      :class="'i-button-size-' + size"
      :disabled="disabled"
      @click="handleClick">
    <slot></slot>
  </button>
</template>

<script lang="ts">
// 判断参数是否是其中之一
function oneOf(value: string, validList: string[]) {
  for (let i = 0; i < validList.length; i++) {
    if (value === validList[i]) {
      return true;
    }
  }
  return false;
}

import {defineComponent} from 'vue'

export default defineComponent({
  name: "i-button",
  props: {
    size: {
      validator(value: string) {
        return oneOf(value, ['small', 'large', 'default']);
      },
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },

  setup(props, context) {
    const handleClick = () => {
      context.emit('on-click', event);
    }
    return {
      handleClick
    }
  }
})

</script>

<style scoped>
.i-button-size-small {
  font-size: 12px;
  color: red
}

.i-button-size-large {
  font-size: 18px;
  color: yellow
}

.i-button-size-default {
  font-size: 14px;
  color: palegoldenrod
}

</style>
